<template>
  <div class="video-screen">
    <EasyPlayer
      class="player-wrapper-content"
      id="videoEasy"
      ref="video"
      controls
      :videoUrl="url"
      live
      height="100%"
      width="100%"
      :isaspect="false"
      :stretch="true"
      :show-custom-button="false"
    ></EasyPlayer>
    <div class="btn-wrap">
      <div class="stop-btn" @click.stop="stopFn()">
        <img :src="videoIcon.stop" alt="停止" />
      </div>
    </div>
    <!--    <div class="container cruise-video">-->
    <!--      <EasyPlayer-->
    <!--        class="player-wrapper-content"-->
    <!--        id="videoEasy"-->
    <!--        ref="video"-->
    <!--        controls-->
    <!--        :videoUrl="url"-->
    <!--        live-->
    <!--        height="100%"-->
    <!--        width="100%"-->
    <!--        aspect="1:1"-->
    <!--        :isaspect="false"-->
    <!--        :stretch="true"-->
    <!--        :show-custom-button="false"-->
    <!--      ></EasyPlayer>-->
    <!--      <div class="btn-wrap">-->
    <!--        <div class="stop-btn" @click.stop="stopFn()">-->
    <!--          <img :src="videoIcon.stop" alt="停止" />-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
//https://github.com/tsingsee/EasyPlayer.js
import EasyPlayer from "@easydarwin/easyplayer";
import { postData } from "@/request/http";

export default {
  name: "",
  components: { EasyPlayer },
  props: {
    url: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      video: null,
      videoUrl: "",
      videoData: {},
      videoIcon: {
        stop: require("@/assets/img/video-stop2.png"),
      },
      url_new: "",
    };
  },
  computed: {
    flag() {
      return this.$store.state.cameraPlay.flag;
    },
  },
  created() {},
  mounted() {
    this.video = this.$refs.video;
    // if (this.video.videoUrl != "") {
    //   this.video.destroyVideoJS();
    // }
  },
  methods: {
    fnStop() {
      this.video.destroyVideoJS();
    },
    //获取url
    getUrl(sn, chns = 0) {
      if (!sn) {
        return;
      }

      return new Promise((resolve, reject) => {
        postData("/adminweb/device/stream/live/url/ticket/lasted/unlimited", {
          sn: sn,
          ptl: "WS-FLV",
          channel: chns,
          sub: 0,
          ip_match_to: window.location.hostname,
        })
          .then((res) => {
            if (res.code == 0) {
              this.url_new = res.datas.stream;
              //this.url_new = "http://flv.bdplay.nodemedia.cn/live/bbb.flv";
              //this.url_new = "ws://192.168.1.77:48000/live/000.flv?tik=ce19e22642ae5431b5cb39d39a2815ea&tikpwd=";
              resolve(res);
            } else if (res.code == -56055) {
              return;
            } else {
              this.$message.error(res.code + "，" + res.msg);
            }
          })
          .catch((res) => {
            reject("error");
            this.$message.error("error");
          });
      });
    },
    //单个停止
    stopFn() {
      this.video.destroyVideoJS();
    },
  },
  watch: {
    data: {
      handler(_new) {
        this.videoData = _new;
      },
      deep: true,
    },
    sn: {
      handler(_new, _old) {
        if (_old != _new) {
          this.sn = _new;
          this.getUrl(_new, this.chns);
        }
      },
      deep: true,
    },
    chns: {
      handler(_new, _old) {
        if (_old != _new) {
          this.chns = _new;
          this.getUrl(this.sn, _new);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  beforeDestory() {
    // this.video.destroyVideoJS();
  },
};
</script>
<style scoped>
.video-screen {
  overflow: hidden;
  width: 100%;
  height: 125px;
  position: relative;
  z-index: 999 !important;
}
.player-wrapper-content {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.label {
  position: absolute;
  right: left;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  width: auto;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  border-radius: 10px;
  z-index: 999;
}
.chns-label {
  margin-right: 10px;
}
.btn-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 9999;
}
/* .play-btn {
  cursor: pointer;
}
.play-btn img {
  width: 80%;
  height: 80%;
} */
.stop-btn {
  cursor: pointer;
  z-index: 9999;
}
.stop-btn img {
  width: 60%;
  height: 60%;
}

/* 隐藏播放、暂停等各类播放器功能按钮 */

video::-webkit-media-controls-play-button {
  display: none;
}
video::-webkit-media-controls-timeline {
  display: none;
}
video::-webkit-media-controls-mute-button {
  display: none;
}
/* 
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-current-time-display{
    display: none;            
}
video::-webkit-media-controls-time-remaining-display {
    display: none;            
}

video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;            
}
video::-webkit-media-controls-volume-slider {
    display: none;            
}
video::-webkit-media-controls-enclosure{
    display: none;
} */

/* 视频全铺 */
.video {
  object-fit: fill;
}
</style>
<style>
.player-wrapper-content .player-content {
  width: 100%;
  height: 100%;
}

.player-wrapper-content .video-wrapper {
  position: revert !important;
}
</style>
